<template>
  <div class="home">
    <a-layout id="components-layout-demo-fixed-sider">
      <a-layout-sider
        :style="{ overflowX: 'hidden', overflowY:'auto', maxWidth: '256px', width: '256px', height: '100vh', position: 'fixed', left: 0 }"
      >
        <div class="edit-sider-header" @click="onClickDir">剧情管理器</div>
        <MenuItem @click-file="onClickFile" :storyData="storyDataArray"></MenuItem>
      </a-layout-sider>
      <a-layout :style="{ marginLeft: '256px' , height: '100vh', }">
        <a-layout-header :style="{ background: '#fff', padding: 0 }">
          <EditorHead @add-role="onAddRole" :parters="getCurrentParters"></EditorHead>
        </a-layout-header>
        <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
          <div
            :style="{ padding: '24px', background: '#fff', height:'580px', textAlign: 'center' }"
          >
            <EditorContent
              @change="onChangeFile"
              @save="onSaveFile"
              :file="getCurrentFile"
              :id="activeId"
            ></EditorContent>
          </div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">editor Created by zuimo</a-layout-footer>
      </a-layout>
    </a-layout>
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
import MenuItem from "@/components/MenuItem.vue";
import EditorHead from "@/components/EditorHead.vue";
import EditorContent from "@/components/EditorContent.vue";
import storyData from "@/static/data";
import { transform } from "@/static/helpers";
const path = require("path");
const Files = require("@/static/helpers/handleFile");
const { remote, ipcRenderer } = require("electron");
const defaultRoot = remote.app.getPath("documents");
const filePath = path.join(defaultRoot);
const uuid4 = require("uuid/v4");
const fileClass = new Files(filePath);
import { Layout } from "ant-design-vue";
Vue.use(Layout);
export default {
  name: "home",
  data() {
    return {
      storyDataArray: [],
      storyDataObject: {},
      activeId: 2, // 当前打开的文件的 id
      unSaveIds: [], // 修改后未保存的文件的 id 的数组
      openIds: [] // 打开未关闭的文件 id 数组
    };
  },
  components: {
    HelloWorld,
    MenuItem,
    EditorHead,
    EditorContent
  },
  computed: {
    // 获取当前选中的文件
    getCurrentFile() {
      return this.storyDataObject[this.activeId];
    },
    // 获取当前选中的文件的角色名称
    getCurrentParters() {
      const roles = this.storyDataObject[this.activeId].role;
      if (roles) {
        return roles.split(",");
      } else {
        return [];
      }
    },
  
  },
  methods: {
    onBuildDir(dirname) {
      const id = uuid4();
      const dirPath = path.join(filePath, filename);
      const newDir = {
        isFolder: true, // 是否为文件夹
        filename: dirname,
        createAt: new Date().getTime(),
        path: dirPath,
        id,
        children: []
      };
       fileClass.writeDir(filePath).then(() => {
        this.storyDataObject =  { ...this.storyDataObject,[id]:newDir }
        this.storyDataArray.push(newDir)
      });
    },
    onBuildFile(filename) {
      const id = uuid4();
      const filePath = path.join(filePath, filename);
      const newFile = {
        isFolder: false, // 是否为文件夹
        filename,
        createAt: new Date().getTime(),
        path: filePath,
        id,
        body: "",
        role: ""
      };
     
    },
    //  点击文件后要打开文件
    onClickFile(id) {
      this.activeId = id;
    },
    //  保存文件 （做文件内容的本地持久化）
    onSaveFile(file) {
      console.log(file);
    },
    //  修改文件 （指的是临时保存当前内存里缓存的文件）
    onChangeFile(file) {
      this.storyDataObject[this.activeId].body = file;
    },
    onAddRole(role) {
      this.storyDataObject[this.activeId].role += "," + role;
    },
    onClickDir() {}
  },
  created() {
    this.storyDataObject = transform(storyData);
    this.storyDataArray = storyData;
  }
};
</script>

<style lang="css" scoped>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.edit-sider-header {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #ffffff;
  line-height: 64px;
  height: 64px;
  padding-left: 42px;
}
</style>